<template>
  <div  class="tlv-details-view">

    <div class="top-view">
<!--      <div class="top-left">-->
<!--        <span>任务状态：</span>-->

<!--        <span v-if="datas.status == 0">未启动</span>-->
<!--        <span v-if="datas.status == 1">进行中</span>-->
<!--        <span v-if="datas.status == 2">暂停</span>-->
<!--&lt;!&ndash;        <span v-if="datas.status == 3">延期</span>&ndash;&gt;-->
<!--        <span v-if="datas.status == 4">待验收</span>-->
<!--        <span v-if="datas.status == 5">验收不通过</span>-->
<!--        <span v-if="datas.status == 6">已完成</span>-->
<!--        <span v-if="datas.status == 7">已终止</span>-->
<!--&lt;!&ndash;        <span v-if="datas.postpone">(延期{{datas.postpone}}天)</span>&ndash;&gt;-->
<!--        <span v-if="datas.delay_day">(延期{{datas.delay_day}}天)</span>-->
<!--      </div>-->

<!--      <div class="top-right" v-if="checkUser() && !disbale">-->

<!--        <el-button type="primary" size="mini" v-if="datas.status == 0" @click="changeStatus(1)">开启任务</el-button>-->
<!--        <el-button type="primary" size="mini" v-if="datas.status == 2" @click="changeStatus(1)">再次开启</el-button>-->
<!--        <el-button type="primary" size="mini" v-if="datas.status == 1 || datas.status == 3" @click="changeStatus(2)">暂停任务</el-button>-->
<!--&lt;!&ndash;        <el-button type="primary" size="mini" v-if="datas.status == 1 || datas.status == 3" >延期任务</el-button>&ndash;&gt;-->
<!--        <el-button type="primary" size="mini" v-if="(datas.status == 1 || datas.status == 3 || datas.status == 5) && datas.mandatory_check" @click="finishOrCheck(4)">提交验收</el-button>-->
<!--        <el-button type="primary" size="mini" v-else-if="datas.status == 1 || datas.status == 3" @click="finishOrCheck(6)">结束任务</el-button>-->
<!--        <el-button type="primary" size="mini" @click="changeClick" v-if="!datas.is_apply && datas.status < 6 && datas.status != 4 && datas.status != 2">变更申请</el-button>-->

<!--      </div>-->

<!--      <el-button type="primary" size="mini" @click="changeClick">变更申请</el-button>-->
    </div>

    <el-form ref="elForm" :model="datas" size="small" label-width="110px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="所属项目：">
            <div>
              <span>{{datas.project_name}}</span>

              <span >({{getProjectStatus()}})</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务编号：">
            <div>{{datas.task_no}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务名称：">
            <div>{{datas.task_name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="父任务：" v-if="datas.level != 1">
            <div>{{datas.parent_name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="前置任务：" v-if="datas.level != 1">
            <div>{{datas.foreground_task_name?datas.foreground_task_name:'无'}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工期（天）：">
            <span>{{datas.duration}}</span><span v-if="datas.delay_day" style="color: red;padding-left: 10px">(延期{{datas.delay_day}}天)</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划开始时间：">
            <div>{{datas.start_date ? dateFormat1('yyyy-mm-dd',datas.start_date) : ""}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划结束时间：">
            <div>{{datas.end_date ? dateFormat1('yyyy-mm-dd',datas.end_date) : ""}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际开始时间：">
            <div>{{datas.real_start_date ? dateFormat1('yyyy-mm-dd',datas.real_start_date) : ""}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实际结束时间：">
            <div>{{datas.real_end_date ? dateFormat1('yyyy-mm-dd',datas.real_end_date) : ""}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务负责人：">
            <div v-if="datas.person_in_charge">{{datas.person_in_charge.member_name}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务参与人：">
            <div v-if="datas.task_member">
              <span v-for="(item,index) in datas.task_member">{{item.member_name}}{{index != datas.task_member.length-1 ? "," : ""}}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="阶段性评审：">
            <div>{{datas.periodical_review?"是":"否"}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="强制验收：">
            <div>{{datas.mandatory_check?"是":"否"}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务进度：">
            <div>{{datas.task_progress}}%</div>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <div v-if="datas.children && datas.children.length">
<!--      <div style="padding-bottom: 10px">子任务</div>-->
      <item-title title="子任务"></item-title>
      <el-table
        size="medium"
        :data="datas.children"
        border
        align="center"
        @row-click="rowClick"
        style="width: 100%">
        <el-table-column
          type="index"
          align="center"
          width="50px"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="task_name"
          label="任务名称"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="duration"
          align="center"
          label="工期（天）"
          width="100">
        </el-table-column>
        <el-table-column
          prop="foreground_task_name"
          align="center"
          label="前置任务">
        </el-table-column>
        <el-table-column
          prop="task_progress"
          align="center"
          label="任务进度">
          <template slot-scope="scope">
            <span>{{scope.row.task_progress}}%</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="计划开始时间">
          <template slot-scope="scope">
            {{scope.row.start_date ? dateFormat1('yyyy-mm-dd',scope.row.start_date) : ''}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="计划结束时间">
          <template slot-scope="scope">
            {{scope.row.end_date ? dateFormat1('yyyy-mm-dd',scope.row.end_date) : ''}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="实际开始时间">
          <template slot-scope="scope">
            {{scope.row.real_start_date ? dateFormat1('yyyy-mm-dd',scope.row.real_start_date) : ''}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="实际结束时间">
          <template slot-scope="scope">
            {{scope.row.real_end_date ? dateFormat1('yyyy-mm-dd',scope.row.real_end_date) : ''}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="负责人">
          <template slot-scope="scope">
            <span v-if="scope.row.person_in_charge">{{scope.row.person_in_charge.member_name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="参与人">
          <template slot-scope="scope">
            <div v-if="scope.row.task_member && scope.row.task_member.length">
              <el-popover
                placement="top-start"
                width="100"
                trigger="hover">
                <div>
                  <div v-for="item in scope.row.task_member" style="padding-bottom: 5px">
                    <i class="el-icon-user">{{  item.member_name}}</i>
                  </div>
                </div>
                <i slot="reference" class="el-icon-user">{{scope.row.task_member.length}}</i>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="阶段性评审">
          <template slot-scope="scope">
            <span>{{scope.row.periodical_review?'是':'否'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="强制验收">
          <template slot-scope="scope">
            <span>{{scope.row.mandatory_check?'是':'否'}}</span>
          </template>
        </el-table-column>

      </el-table>
    </div>


    <el-dialog
      title="任务变更申请"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="handleClose">

      <change-task-view ref="changeView" :members="members" :project-name="projectName"></change-task-view>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick">提交审批</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import changeTaskView from "./changeTaskView";

    export default {
        name: "detailsView",
        components:{changeTaskView},
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{
                        task_member:[],
                        children:[],
                    }
                }
            },
            projectName:String,
            members:Array,
            disbale:{
                type:Boolean,
                default:function () {
                    return false
                }
            }
        },
        watch:{
            datas:{
                handler:function (newV,oldV) {
                    if (newV){
                        // this.getOperationRecords()
                        //this.getChangeList();
                    }
                },
                immediate:true,
                deep:true
            }
        },
        data:function () {
            return{
                tableData:[],
                dialogVisible:false,

                operationList:[],
                pageNum:1,
                pageSize:10,
                total:0,
                squareUrl:'',
            }
        },
        mounted:function(){

        },
        methods:{
            getProjectStatus:function(){
                let str = ''
                switch (this.datas.project_status) {
                    case 1:
                        str = "启动中(待提交方案)"
                        break;
                    case 2:
                        str = "启动中(方案评审)"
                        break;
                    case 3:
                        str = "方案评审中"
                        break;
                    case 32:
                        str = "审批拒绝"
                        break;
                    case 4:
                        str = "计划阶段"
                        break;
                    case 5:
                        str = "计划审批中"
                        break;
                    case 52:
                        str = "审批拒绝"
                        break;
                    case 53:
                        str = "待项目开始"
                        break;
                    case 6:
                        str = "进行中"
                        break;
                    case 61:
                        str = "暂停审批中"
                        break;
                    case 62:
                        str = "暂停审批拒绝"
                        break;
                    case 63:
                        str = "终止审批中"
                        break;
                    case 64:
                        str = "终止审批拒绝"
                        break;
                    case 7:
                        str = "项目材料报告验收中"
                        break;
                    case 8:
                        str = "已暂停"
                        break;
                    case 9:
                        str = "已终止"
                        break;
                    case 71:
                        str = "验收评审"
                        break;
                    case 72:
                        str = "材料审核未通过"
                        break;
                    case 74:
                        str = "结题会议通过"
                        break;
                    case 75:
                        str = "验收不合格"
                        break;
                    case 76:
                        str = "整改再验收"
                        break;
                    case 77:
                        str = "结题验收中"
                        break;
                    case 78:
                        str = "结题验收通过"
                        break;
                    case 79:
                        str = "结题验收驳回"
                        break;
                    default:
                        break;
                }

                return str;
            },
            changeTableRowClick:function(row, column, event){
                this.$router.push({name:'projectAuditDetail',query:{id:row.flow_id}});
            },
            getChangeList:function(){
                let data = {
                    project_id:this.datas.project_id,
                    start_time:'',
                    end_time:'',
                    change_type:0,
                    object_id:this.datas.id,
                    pager:{
                        limit:100,
                        skip:1,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_WORK_CHANGE_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data || [];
                        console.log(this.tableData)
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            },
            getOperationRecords:function () {

                let data = {
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_WORK_OPERATION_LIST(this.datas.id,data).then(res=>{
                    if (res.code == 200){
                        this.operationList = res.data.data;
                        this.total = res.data.total;
                    }else {
                        this.$message.error(res.msg);
                    }
                })
            },
            rowClick:function(row){
                let data = {
                    id : row.id,
                    arr : row.persons,
                    task_member : this.datas.task_member
                }
                this.$emit("selectNode",data)
            },

            checkUser:function(){

                if (this.datas.person_in_charge && this.datas.person_in_charge.member_id == this.$store.getters.userInfo.user.id){
                    return true;
                }else {
                    return false;
                }
            },
            changeClick:function () {
                this.dialogVisible = true;
                setTimeout(() => {
                    if (this.$refs.changeView){
                        this.$refs.changeView.setData(this.datas)
                    }
                },500)
            },
            handleClose:function () {
                this.dialogVisible = false;
            },
            confirmClick:function () {

                if (this.$refs.changeView){

                    this.$refs.changeView.validateForm().then(()=>{
                        this.dialogVisible = false;
                        let data = {
                            object_id:this.datas.id,
                            project_id:this.datas.project_id,
                            project_name:this.projectName,
                            change_type:3,
                            reason_id:this.$refs.changeView.datas.change_cause_id,
                            reason:this.$refs.changeView.datas.change_cause,
                            description:this.$refs.changeView.datas.details_describe,
                            level_id:this.$refs.changeView.datas.change_level_id,
                            level:this.$refs.changeView.datas.change_level,
                            change_describe:this.$refs.changeView.datas.change_describe,
                            task_after:{
                                is_update_task_time:Number(this.$refs.changeView.datas.is_update_task_time),
                                start_date:this.$refs.changeView.datas.start_date,
                                end_date:this.$refs.changeView.datas.end_date,
                                duration:this.$refs.changeView.datas.duration,
                                person_in_charge:this.$refs.changeView.datas.person_in_charge,
                                task_member_id:this.$refs.changeView.datas.task_member_id,
                                task_member:this.$refs.changeView.datas.task_member,
                            }
                        }

                        this.$api.PROJECT_START_CHANGE_CREATE(data).then(res=>{
                            if (res.code == 200){
                                this.datas.is_apply = 1;
                                this.$message.success("提交成功")

                                this.pageNum = 1;
                                // this.getOperationRecords()
                                //this.getChangeList();
                                this.$emit("refreshData")
                            }
                        }).catch(err=>{

                        })

                    })

                }else{
                    this.dialogVisible = false;
                }

            },
            finishOrCheck:function(status){
                if (this.datas.children && this.datas.children.length){
                    let b = true;
                    let name = ""
                    for (let i = 0; i < this.datas.children.length; i++){
                        if (this.datas.children[i].status != 6){
                            b = false;
                            name = this.datas.children[i].task_name
                            break;
                        }
                    }
                    if (!b){
                        this.$message.error("请先完成任务：" + name)
                        return;
                    }
                }

                if (this.datas.files){
                    let b = true;
                    let name = ""
                    for (let i = 0; i < this.datas.files.length; i++){
                        let file = this.datas.files[i]
                        if (file.need && (!file.list || !file.list.length)){
                            b = false;
                            name = file.file_name
                            break;
                        }
                    }
                    if (!b){
                        this.$message.error("请先提交任务文档：" + name)
                        return;
                    }
                }

                this.changeStatus(status);
            },
            changeStatus:function (status) {

                let data = {
                    id:this.datas.id,
                    status:status
                }

                this.$api.PROJECT_START_TASK_STATUS(data).then(res=>{
                    if (res.code == 200){
                        this.datas.status = status;
                        this.pageNum = 1;
                        // this.getOperationRecords()
                        this.$emit("refreshData")
                    }else {
                        this.$message.error(res.msg);
                    }
                }).catch(err=>{

                })
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/views/projectManagement/list/details/taskDetailView.scss";
</style>
